<template>
  <div className="dashboard-container">
    <div style="margin: 15px">
      <el-tabs v-model="tabName" :stretch="true" @tab-click="handleTabClick">
        <el-tab-pane v-for="(pane,index) in panes" :key="index" :label="pane.label" :name="pane.name"></el-tab-pane>
        <el-tab-pane label="历史新闻搜索" name="search"></el-tab-pane>
      </el-tabs>
      <el-input v-model="titleKeyword" placeholder="请输入标题关键词" prefix-icon="el-icon-search"
                style="width: 300px;float: left" clearable v-if="tabName === 'search'" @change="search"
      />
      <div v-if="tableFlag">
        <el-button type="primary" style="float: right" @click="translate" v-if="!isZh">翻译</el-button>
        <el-button type="primary" style="float: right" @click="getPageInfo(list)" v-if="isZh">原文
        </el-button>
        <el-table :data="pageList" style="width: 100%" v-loading="listLoading">
          <el-table-column prop="title" label="新闻标题">
            <template v-slot="scope">
              <el-button type="text" @click="openContent(scope.row.id)">{{ scope.row.title }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col style="text-align: left">
            <el-pagination :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="total"
                           style="margin-top: 20px;" @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
            />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>

import router from '@/router'
import { fetchList, searchNews, translate } from '@/api/newsList'

export default {
  name: 'NewsList',
  data() {
    return {
      tabName: '生活',
      list: [],
      titleKeyword: '',
      panes: [
        { label: '生活', name: '生活', content: '生活' },
        { label: '国内', name: '国内', content: '国内' },
        { label: '国际', name: '国际', content: '国际' },
        { label: '经济', name: '经济', content: '经济' },
        { label: '娱乐', name: '娱乐', content: '娱乐' },
        { label: '运动', name: '运动', content: '运动' },
        { label: 'IT', name: 'IT', content: 'IT' },
        { label: '科学', name: '科学', content: '科学' }
      ],
      Title: [],
      currentPage: 1, // 当前所在页默认是第一页
      pageSize: 5, // 每页显示多少行数据 默认设置为5
      total: 0, // 总数据条数
      pageList: [], // 分页后的当前页数据
      listLoading: false,
      isZh: false,
      tableFlag: true
    }
  },
  mounted() {
    this.GetList()
  },
  methods: {
    handleTabClick(tab) {
      if (tab.name === 'search') {
        this.list = []
        this.pageList = []
        this.tableFlag = false
      } else {
        this.tableFlag = true
        this.currentPage = 1
        this.pageSize = 5
        this.GetList()
      }
    },
    openContent(id) {
      router.push({
        path: '/news-list/news-content',
        query: { id: id }
      })
    },
    GetList() {
      this.list = []
      this.pageList = []
      this.listLoading = true
      fetchList(this.tabName).then(data => {
        this.list = data
        this.getPageInfo(this.list)
      }).finally(() => {
        this.listLoading = false
      })
    },
    translate() {
      let params = { idStart: this.pageList[0].id, idEnd: this.pageList[this.pageList.length - 1].id }
      this.listLoading = true
      translate(params).then(data => {
        this.pageList = data
        this.isZh = true
      }).finally(() => {
        this.listLoading = false
      })
    },
    search() {
      this.listLoading = true
      searchNews(this.titleKeyword).then(data =>{
        this.tableFlag = true
        this.list = data
        this.getPageInfo(this.list)
        console.log(data)
      }).finally(() => {
        this.listLoading = false
      })
    },
    // 分页时修改每页的行数,这里会自动传入一个size
    handleSizeChange(size) {
      // 修改当前每页的数据行数
      this.pageSize = size
      // 数据重新分页
      this.getPageInfo(this.list)
    },
    // 调整当前的页码
    handleCurrentChange(pageNumber) {
      // 修改当前的页码
      this.currentPage = pageNumber
      // 数据重新分页
      this.getPageInfo(this.list)
    },
    // 获取当前页的数据信息
    getPageInfo(list) {
      this.isZh = false
      this.total = list.length
      // 清空pageList中的数据
      this.pageList = []
      // 获取当前页的数据
      for (
        let i = (this.currentPage - 1) * this.pageSize;
        i < this.total;
        i++
      ) {
        // 把遍历的数据添加到pageList里面
        this.pageList.push(list[i])
        // 判断是否达到一页的要求
        if (this.pageList.length === this.pageSize) break
      }
    }
  }
}
</script>

